<link rel="stylesheet" href="templates/authority/index/css/messageStatistics.css" />
<link rel="stylesheet" >
<style type="text/css">
	.myChart{height: 400px;}
</style>
<div class="pd14 vany_authority">
    <div class="vany_treeTable pd14" id="authority">
        <!--面包屑-->
        <div class="pb10" id="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">消息管理</el-breadcrumb-item>
                <el-breadcrumb-item>消息统计</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!--表格-->
        <div id="contents">
            <div id="app" class = "app">
                <el-row :gutter="20">
                    <el-col :span="6"><div class="grid-content bg-purple content"><ul><li>剩余短信数</li><li id = "xxzl" style="font-size: 32px;">8650</li></ul></div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple content"><ul><li>已发消息数</li><li id = "byxx" style="font-size: 32px;">8650</li></ul></div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple content"><ul><li>发送失败消息数</li><li id = "bzxx" style="font-size: 32px;">8650</li></ul></div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple content"><ul><li>定时消息数</li><li id = "jrxx" style="font-size: 32px;">8650</li></ul></div></el-col>
                </el-row>
            </div>           
        </div>
    </div>
	<table style="width:100%;margin-top:10px;table-layout:fixed;min-width:800px;">
		<tr>
			<td style="width:50%;min-height:10px;">
				<div class = "charts">
	              <div id="myChart" class = "myChart"></div>
	              <div class = "title_msg" style="position: absolute;font-size: 16px;font-weight: bold;color: #000;">消息模式统计</div>
	              <div id="calendartool1" class = "calendar">
	                  <template>
	                      <div class="block">
	                          <el-date-picker v-model="value6" type="daterange" @change="pickTime" placeholder="选择时间区间" >
	                          </el-date-picker>
	                      </div>
	                  </template>
	              </div>	              
		          <table id = "tableShow1" cellspacing="30" class = "tableShow"> 
		          		<tr style="background-color: #e3e8ee;">
		          			<td style="font-weight: bold;">模式</td>
		          			<td style="font-weight: bold;">数量</td>
		          			<td style="font-weight: bold;">百分比</td>
		          		</tr>
		          		<tr>
		          			<td>图文</td>
		          			<td>0</td>
		          			<td>0%</td>
		          		</tr>
		          		<tr>
		          			<td>文本</td>
		          			<td>0</td>
		          			<td>0%</td>
		          		</tr>
		          		<tr>
		          			<td>外链</td>
		          			<td>0</td>
		          			<td>0%</td>
		          		</tr>
		          </table>
	            </div>	            
			</td>
			<td style="width:50%;min-height:10px;">
				<div class = "charts" style = "float:right;">
	              <div id="myChart1" class = "myChart"></div>
	              <div class = "title_msg" style="position: absolute;font-size: 16px;font-weight: bold;color: #000;">消息渠道统计</div>
	              <div id="calendartool2">
	                  <template>
	                      <div class="block">
	                          <el-date-picker v-model="value6" type="daterange" @change="pickTime1" placeholder="选择时间区间">
	                          </el-date-picker>
	                      </div>
	                  </template>
	              </div>
	              <table id = "tableShow2" style="width:480px;"  class = "tableShow"> 
		          		<tr style="background-color: #e3e8ee;">
		          			<td style="font-weight: bold;">渠道</td>
		          			<td style="font-weight: bold;">数量</td>
		          			<td style="font-weight: bold;">百分比</td>
		          			<td style="font-weight: bold;">成本</td>
		          		</tr>
		          		<tr>
		          			<td>短信</td>
		          			<td>0</td>
		          			<td>0%</td>
		          			<td>0%</td>
		          		</tr>
		          		<tr>
		          			<td>邮件</td>
		          			<td>0</td>
		          			<td>0%</td>
		          			<td>0%</td>
		          		</tr>
		          		<tr>
		          			<td>企业号</td>
		          			<td>0</td>
		          			<td>0%</td>
		          			<td>0%</td>
		          		</tr>
		          </table>
	          </div>
			</td>
		</tr>
	</table>   
</div>

<script type="text/javascript" src="templates/authority/index/js/echarts.min.js"></script>
<script type="text/javascript" src="templates/authority/index/js/messageStatistics.js"></script>
